<template>
  <div class="contain">
    <div class="header">
      <el-form ref="form" class="left">
        <el-form-item label="用户姓名" label-width="70px">
          <el-input />
        </el-form-item>
        <el-form-item label="身份证号" label-width="70px">
          <el-input />
        </el-form-item>
        <el-form-item label="出发地区" label-width="90px">
          <div class="block">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            />
          </div>
        </el-form-item>
        <el-form-item label="到达目的地" label-width="90px">
          <div class="block">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="0"
            />
          </div>
        </el-form-item>
      </el-form>
      <div class="right">
        <el-button>查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <el-button class="declare" @click="$router.push('auditRecord')">审核往返申报
      <div class="undeal">1</div>
    </el-button>
    <div class="mainContent">
      <div class="tableContent">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column

            prop="date"
            label="用户姓名"
            width="100"
          />
          <el-table-column
            prop="name"
            label="用户性质"
            width="120"
          />
          <el-table-column
            prop="身份证号"
            label="省份"
            width="120"
          />
          <el-table-column
            prop="手机号"
            label="市区"
            width="120"
          />
          <el-table-column
            prop="address"
            label="往返类型"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="出发时间"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="出发地区"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="详细地址"
            width="150"
          />
          <el-table-column
            prop="zip"
            label="到达地区"
            width="120"
          />
          <el-table-column
            prop="zip"
            label="详细地址"
            width="150"
          />
          <el-table-column
            prop="zip"
            label="交通"
            width="120"
          />
        </el-table>
      </div>
    </div>
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]

    }
  }
}
</script>

<style scoped>
.header{
  padding: 40px 15px;
  width: 98%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  margin: auto;
  border: 1px solid #e4e4e4;
  box-shadow: 3px 3px 3px rgba(201, 201, 201, 0.349019607843137);

}
.left{
  display: flex;
  align-items: center;

}

.right>button {
  width: 100px;
  height: 40px;
}
.right>button:nth-child(1){
    border: 1px solid #409eff;
    color: #409eff;
}
.declare{
  width: 190px;
  margin: 15px;
  border: 1px solid #409eff;
  color: #409eff;
  position: relative;
}
.undeal{
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  color: #fff;
  line-height: 20px;
  right: 0;
  top: 0;
  translate: 10px -10px;
}
.mainContent{
  height: 100vh;
  margin: 0 15px;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #e4e4e4;
}
.contain{
  width: 100%;
  height: 100%;
}
.el-form-item{
  margin: 0;
}
.tableContent{
width: 100%;
height: 100%;
  border: 1px solid #e4e4e4;
}
</style>
